<template>
    <div >
        <div class="section">
            <div class="swiper-container"
                 ref="slider">
                <div class="swiper-wrapper">
                    <div v-for="s in slides" class="swiper-slide">
                        <img :src="s.img_url"/>
                    </div>
                </div>


                <div class="swiper-pagination"
                     ref="pagination"></div>
            </div>
        </div>
        <div class="section"></div>
        <div class="section"></div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Swiper from "swiper"
    import 'swiper/dist/css/swiper.css'

    export default{
        data(){
            return {
                announcement:'本周新书优惠，新上架电子书一律八折',
                slides:[
                    {id:1,img_url:require("./fixtures/sliders/t1.svg")},
                    {id:2,img_url:require("./fixtures/sliders/t2.svg")}]
            }
        },
        mounted() {
            debugger
            new Swiper(this.$refs.slider, {
                pagination: this.$refs.pagination,
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            })
        }
    }
</script>